<template>
    <GeneralOperationForm
        :navLists="navLists"
    >
        <template #default>
            <el-form 
                ref="ruleFormRef1"
                :model="formData1" 
                :rules="rules1"
                label-width="8vw"
                status-icon
                label-position="left"
            >
                <Section :list="navLists[0]" />
                <Section :list="navLists[1]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="离院原因"
                        prop="type"
                    >
                        <GeneralSelect
                            v-model="formData1.type"
                            clearable
                            placeholder="请选择离院原因"
                            :dictionary="GENERAL_REMOTE_OPTIONS[16]"
                        />
                    </el-form-item>
                </div>
                
                <Section :list="navLists[2]" />
                <div class="edit-form-item">
                    <el-form-item 
                        v-for="(item, index) in formData1.attachments"
                        :key="`attachments-${index}`"
                        label-width="0"
                        prop="attachments"
                    >
                        <FormUploadImage 
                            v-model:imageStr="item.attachmentName"
                            :title="item.attachmentTitle"
                        />
                    </el-form-item>
                </div>
            </el-form>
        </template>
        <template #footer>
            <el-button 
                type="primary"
                @click="onSubmit1(ruleFormRef1)"
            >
                注销
            </el-button>
        </template>
    </GeneralOperationForm>
</template>
  
<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        UploadFilled
    } from '@element-plus/icons-vue'
    import { welfareorgsGetWelfareOrgsInfoApi, welfareorgsAddChildInfoApi } from '@/apis'
    import { GENERAL_REMOTE_OPTIONS } from '@/constants'

    import { isPhone, isIDCard, dateFormatter } from '@/utils'
    import GeneralOperationForm from '@/components/generalOperationForm/GeneralOperationForm.vue'
    import Section from '@/components/section/Section.vue'
    import AdministrativeDivisionsCascader from '@/components/administrativeDivisionsCascader/AdministrativeDivisionsCascader.vue'
    import FormUploadImage from '@/components/formUploadImage/FormUploadImage.vue'
    import GeneralSelect from '@/components/generalSelect/GeneralSelect.vue'

    import {  } from '@/constants'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const dialogObj = defineModel<any>('dialogObj', {
        required: false,
        default: {}
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        tabelSearch: [data?: any]
    }>()
    // 侧边栏
    const navLists:Ref<any[]> = ref([
        {
            text: '离院信息',
            id: 'nav-id-1',
            level: 1,
        },
        {
            text: '离院原因',
            id: 'nav-id-1-1',
            level: 2,
        },
        {
            text: '附件',
            id: 'nav-id-1-2',
            level: 2,
        },
    ])

    const ruleFormRef1 = ref<any>()
    const formData1: Ref<any> = ref({
        type: '',
        attachments: [
            {
                attachmentName: '', //附件地址名称（多个中间用，分割）	
                attachmentTitle: '安置申请审批表', //附件名称 （例如：身份证正面、身份证反面、学位证书、毕业证书、机构附件）
                entitySubType: '', //附件子类型枚举
                entitySubTypeName: '', //附件子类型名称
                id: '',
            },
            {
                attachmentName: '', //附件地址名称（多个中间用，分割）	
                attachmentTitle: '安置通知书', //附件名称 （例如：身份证正面、身份证反面、学位证书、毕业证书、机构附件）
                entitySubType: '', //附件子类型枚举
                entitySubTypeName: '', //附件子类型名称
                id: '',
            },
        ], //https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg,https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg
        
        revoked_at: '', //注销时间
    })
    const rules1 = reactive<any>({
        type: [
            { 
                required: true, 
                message: '请选择离院原因！', 
                trigger: 'blur' 
            },
        ],
        // attachments: [
        //     { 
        //         validator: (rule: any, value: any, callback: any) => {
        //             console.log(value)
        //             if (value) {
        //                 callback()
        //             } else {
        //                 callback(new Error('请上传图片！'))
        //             }
        //         }, 
        //         trigger: 'blur' 
        //     },
        // ],
    })
  
    onMounted(() => {
        // if (dialogObj.value?.dialogParams.id) {
            welfareorgsGetWelfareOrgsInfoApi({
                id: dialogObj.value.dialogParams?.id ? dialogObj.value.dialogParams?.id : ''
            }).then((res: any) => {
                formData1.value = res.data
            })
        // }
    })

    const onSubmit1 = (formEl: any) => {
        if (!formEl) return;
        // console.log(formData1.value)
        formEl.validate((valid, fields) => {
            // console.log(valid)
            console.log(fields)
            if (valid) {
                // console.log('submit!')
                formData1.value.revoked_at = dateFormatter(new Date())
                welfareorgsAddChildInfoApi({
                    ...formData1.value
                }).then(res => {
                    emits('tabelSearch')
                    dialogObj.value.dialogVisible = false
                }).catch(err => {
                    // ElMessage({
                    //     type: 'error',
                    //     message: '系统异常，请稍后重试！',
                    // })
                })
            } else {
                // console.log('error submit!')
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                })
            }
        })
    }

    
</script>
  
<style lang="scss" scoped>
    .edit-form-item {
        @include edit-form-item;
        .form-item-width-1 {
            @include form-item-width-1;
        }
    }
</style>
